<template>
  <div>
    <a-space>
      <a-button icon="" @click="visible = true">点击选择</a-button>
      <span>
        {{ "经度：" + posLatLon.lat.toFixed(3) + "纬度：" + posLatLon.lon.toFixed(3) }}
      </span>
    </a-space>
    <a-modal
      title="地点选择"
      :visible="visible"
      :closable="false"
      destroyOnClose
      :footer="null"
    >
      <point-selector
        @change="handlePosChange"
        :proj="proj"
        @cancle="visible = false"
      />
    </a-modal>
  </div>
</template>

<script>
import PointSelector from "./PointSelector.vue";

export default {
  components: {
    PointSelector,
  },
  data() {
    return {
      visible: false,
      posLatLon: {
        lat: 114.3,
        lon: 30.6,
      },
    };
  },
  props: {
    position: Array,
    proj: {
      type: String,
      default: "EPSG:3857",
    },
  },
  model: {
    prop: "position",
    event: "change",
  },

  methods: {
    handlePosChange(pos) {
      this.posLatLon.lat = pos[0];
      this.posLatLon.lon = pos[1];
      this.$emit("change", pos);
      this.visible = false;
    },
  },
  mounted() {},
};
</script>

<style scoped>
</style>